<script setup lang="ts">
import { Empty } from "ant-design-vue";
import type { PropType } from "vue";

defineOptions({ name:"WebxGridList" })
defineProps({
  // 数据列表
  dataSource:{ type:Array, default:() => [] },
  // 列数
  colCount:{ type:Number, default:4 },
  // 是否显示标题
  showTitle:{ type:Function as PropType<ShowTitleProp>, default:() => true },
  // 是否显示底部
  showFooter:{ type:Function as PropType<ShowFooterProp>, default:() => true },
  // 页码对象
  pagination:{ type: Object as PropType<PaginationProp>, default:() => ({}) },
});

// 页码属性
declare type PaginationProp = {
  showPagination?: boolean;
} & Record<string, any>;
// 是否展示title插槽
declare type ShowTitleProp = (data:any) => boolean;
// 是否展示footer插槽
declare type ShowFooterProp = (data:any) => boolean;
</script>

<template>
  <div class="bg-white">
    <div class="flex flex-col gap-4" v-if="dataSource.length">
      <div class="grid gap-2" :style="{ gridTemplateColumns: `repeat(${colCount}, 1fr)` }">
        <div class="rounded bg-white flex flex-col group cursor-pointer border transition hover:-translate-y-1" v-for="(data, index) in dataSource as any[]" :key="index">
          <div class="flex-shrink-0 p-2 flex items-center gap-2 transition group-hover:text-blue-500" v-if="showTitle(data)">
            <slot name="title" v-bind="data" />
          </div>
          <div class="p-2 flex-1 overflow-hidden flex flex-col">
            <slot name="content" v-bind="data" />
          </div>
          <div class="flex-shrink-0 border-t flex justify-between items-start p-2" v-if="showFooter(data)">
            <slot name="footer" v-bind="data" />
          </div>
        </div>
      </div>
      <div class="bg-white flex justify-end p-2" v-if="pagination.showPagination">
        <APagination v-bind="pagination" />
      </div>
    </div>
    <div v-else>
      <AEmpty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
    </div>
  </div>
</template>

<style scoped lang="less"></style>